<template>
	<view class="bg-white">
<!-- 		<u-lazy-load threshold="0" border-radius="10" :show_slogan="item.show_slogan" :index="index"></u-lazy-load>
 -->		
		<u-time-line>
				<u-time-line-item nodeTop="10" v-for="(items,i) in communityInfo" :key="i">
					<template v-slot:content>
						<view class=" bg-white">
							<view class="u-order-desc">
								<text>{{items.slogan_time}}</text>
							</view>
							<!-- 内容文字 -->
									<view class="content" style="padding: 0 30rpx; margin: 30rpx 0;">
									    <view class="text" style="font-size: 30rpx;margin: 10rpx 0;">
									        {{ items.show_slogan }}
											
									    </view>
									</view>
									<view>
										
										<!-- Main Start -->
										<view class="content-box">
											<!-- 内容媒体信息 -->
											<view class="swiper-container">
												<!-- <product-swiper :imgUrls="communityInfo.images" :autoplay="false" borderRadius="14"></product-swiper> -->
												<u-grid :col="3" :border="false">
													<u-grid-item v-for="(item,index) in items.goods_show" :key="index" :custom-style="{margin:'0',padding:'10rpx'}">
														<u-image :src="item" width="100%" height="100%" class="image" mode="aspectFill" @tap="previewImage(items,index)">
															<u-loading slot="loading"></u-loading>
														</u-image>
													</u-grid-item>
												</u-grid>
											</view>
										  <view class="flex row-around" style="margin: 50rpx auto;">
											 <!-- <view class="" style="width: 20rpx;height: 10rpx;">
												 <image src="../../../static/images/icon_forward.png" mode=""></image>
											  </view> -->
											 
											 <button size="lg" class="downLoadBtn" @tap="downloadImgs(items)">转发朋友圈</button>
											<button size="lg" class="downLoadBtn" @tap="shareImgs(items)">分享给朋友</button>
										  </view>
											
										</view>
									</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>

	<share-popup v-model="showShareBtn" :share-id="shareItem.goods_id" pagePath="pages/goods_details/goods_details" type="4"
		:config="{
		avatar: userInfo.avatar,
		nickname: userInfo.nickname,
		image: shareItem.image,
		name: shareItem.show_slogan,
		miniUrl:shareItem.url
	  }" />
	
	<share-popup :show="showShareBtn" @close="showShareBtn = false" :goods-id="shareItem.goods_id" :img-url="shareItem.image"
		:summary="shareItem.remark" :share-title="shareItem.show_slogan" ></share-popup>
		<!-- <u-skeleton :loading="uloading" :animation="true" bgColor="#FFF"></u-skeleton> -->
		<loading-view v-if="uloading"></loading-view>
	</view>
</template>

<script>
    import {
		getshowshowinfo,
        getCommunityDetail,
    } from '@/api/community.js';
    import {
        getRect
    } from '@/utils/tools';
	import { 
		writePhotosAlbum ,
	} from '@/utils/writePhotosAlbum.js'
	import {
		mapGetters,
	} from 'vuex';
    export default {
        data() {
            return {
	          showShareBtn: false,
                communityId: '',
				shareItem:{},
                communityInfo: {
					show_slogan:'',
					
					
                    user: {
                        avatar: '',
                        nickname: '',
                        id: null,
						
                    },
                    goods_data: [],
                    shop_data: [],
                    topic: {
                        id: false,
                        name: ''
                    },
					goods_show:[]
                },
                loading: false, // 加载动画
				uloading:true,
            }
        },
        onLoad(options) {

			this.communityId = options.id;
			

			
            this.$nextTick(() => {
                // 滚动到顶部，防止h5端出现问题
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration:  0,
                });
                getRect('#comment').then((res) => {
                    this.toScrollArr[0] = res.top
                })
            });
            // const options = this.$Route.query;
            // if (options && options.scene) {
            //     const scene = strToParams(decodeURIComponent(options.scene));
            //     options.id = scene.id;
            // }
            // this.communityId = options.id || '';
        },
        onShow() {
            // this.initCommunityDetail(),

        },
		computed:{
			...mapGetters(["userInfo", 'inviteCode','distribution']),
			
		},
		mounted(){
			console.log('测试')
			this.getList()
			
		},
		async onShareAppMessage() {
			const {
				shareItem,
				inviteCode,
			} = this;
			return {
				title: shareItem.show_slogan,
				imageUrl: shareItem.image,
				path: '/pages/goods_details/goods_details?id=' + shareItem.goods_id + "&invite_code=" + inviteCode + "&distributionId="+ this.distribution.id,
			};
		},
        methods: {
			previewImage(info,current) {
				
				uni.previewImage({
					current,
					urls: info.goods_show
				})
			},
			getList(){
				let _this = this;
				getshowshowinfo({id:this.communityId}).then(res=>{
			
				  console.log(res,'details')
				  if(res.code == 1) {
					_this.communityInfo = res.data
				  }
				this.uloading=false
				})
			},
            // 初始化详情
            initCommunityDetail() {
                getCommunityDetail({
                    id: this.communityId
                }).then(res => {
                    if (res.code == 1) {
						
                        this.communityInfo = res.data;
						console.log(11111,this.communityInfo)
                    } else {
                        this.$toast({
                            title: res.msg
                        })
                        setTimeout(() => this.$Router.back(), 2000)
                    }
                })
            },
			//一键复制文本
			 copytext(e){
			    let text=e.show_slogan+e.url
			    wx.setClipboardData({//复制文本
			      data: text,
			      success: function (res) {
			        wx.getClipboardData({//获取复制文本
			          success: function (res) {
			            wx.showToast({
			              title: '复制成功',
			              icon:"none",//是否需要icon
			              mask:"true"//是否设置点击蒙版，防止点击穿透
			            })
			          }
			        })
			      }
			    })
			  },
           // 一键保存图片到本地
		        downloadImgs(e) {
					this.copytext(e)
		         var _this = this
		         // 获取保存到相册权限
		         writePhotosAlbum(
		          function success() {
		           wx.showLoading({
		            title: '加载中',
		            mask: true
		           })
		           // 调用保存图片promise队列
		           let imagesArr=e.goods_show
		            _this.queue(imagesArr)
		            .then(res => {
		             wx.hideLoading()
		             wx.showToast({
		              title: '保存成功，请到朋友圈转发'
		             })
		            })
		            .catch(err => {
		             wx.hideLoading()
		             console.log(err)
		            })
		          },
		          function fail() {
		           wx.showToast({
		            title: '您拒绝了保存到相册'
		           })
		          }
		         )
		        },
		        // 队列
		        queue(urls) {
		         let promise = Promise.resolve()
		         urls.forEach((url, index) => {
		          promise = promise.then(() => {
		           return this.download(url)
		          })
		         })
		         return promise
		        },
		        // 下载
		        download(url) {
		         return new Promise((resolve, reject) => {
		          wx.downloadFile({
		           url: url,
		           success: function(res) {
		            var temp = res.tempFilePath
		            wx.saveImageToPhotosAlbum({
		             filePath: temp,
		             success: function(res) {
		              resolve(res)
		             },
		             fail: function(err) {
		              reject(res)
		             }
		            })
		           },
		           fail: function(err) {
		            reject(err)
		           }
		          })
		         })
		        },
			shareImgs(items){
				this.showShareBtn=true
				this.shareItem=items
			} 
        },
    }
</script>

<style lang="scss">
  

    .content-box {
        margin-bottom: 20rpx;
        background-color: $-color-white;

       
        .swiper-container {
            padding: 0 10rpx;
			.image{
				// width: 100%;
				width: 200rpx;
				height: 200rpx;
			}
        }

        .content {
            padding: 24rpx;

            // 内容文字
            .text {
                white-space: pre-line;
                line-height: 48rpx;
                font-size: 28rpx;
                color: $-color-normal;
            }
			
			
        }
.downLoadBtn{
	border: 1px solid #00632B;
				// background-color: $-color-primary;
				text-align: center;
				color: #00632B;
				margin-bottom: 10rpx;
				// color: $-color-white;
			}
    }
	.icon-share {
		width: 134rpx;
		height: 60rpx;
	}
	.u-order-desc {
		font-size: 28rpx;
		margin-bottom: 16rpx;
	}

</style>
